class Tips {
	constructor(cls='[data-tips]'){
		this.cls=cls;
		this.el=this.generateTipsWarper();
		this.bindEvent();
	}
	generateTipsWarper(){
		let tips=$('<div id="tips" style="left:-1000px;"></div>');
		tips.appendTo('body');
		return tips;
	}
	bindEvent(){
		let that=this;
        $(document).on('mouseover',this.cls,function(event){
            event.preventDefault();
            let offset=$(this).offset();
            let w=$(this).outerWidth(),
                h=$(this).outerHeight(),
                x=offset.left,
                y=offset.top,
                s=$(this).attr('data-tips'),
                p=$(this).attr('tips-position');
            let cls='',acls='',left=0,top=0;
            if(p=='left'){
                cls='tips-right';
                top=y+(h-that.el.outerHeight())/2;
                left=x-that.el.outerWidth()
                acls='fadeInLeft';
            }else if(p=='right'){
                cls='tips-left';
                top=y+(h-that.el.outerHeight())/2;
                left=x+w+5;
                acls='fadeInRight';
            }else if(p=='top'){
                cls='tips-top';
                left=x+(w-that.el.outerWidth())/2;
                top=y-that.el.outerHeight();
                acls='fadeInDown';
            }else{
                left=x+(w-that.tipser.outerWidth())/2;
                top=y+h+5;
                acls='fadeInUp';
            }
            that.show({left:left,top:top,s:s,cls:cls,acls:acls});
        });
        $(document).on('mouseout',this.attr,function(event){
            event.preventDefault();
            that.hide();
        });
	}
    show(opts){
        this.el.addClass(opts.cls).html(opts.s).css({
				top: opts.top+'px',
				left: opts.left+'px'
            }).addClass('animated visbile '+opts.acls).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass(opts.acls);
    	});
    }
    hide(){
       this.el.removeClass();
    }
}
export default Tips;